<!-- <template>
    <div>
        <h1>实时库存数据</h1>
        <div v-if="inventory">
            <p>{{ inventory }}</p>
        </div>
        <div v-else>
            <p>加载中...</p>
        </div>
    </div>
</template>

<script lang="ts">

//@ts-ignore
import * as signalR from '@microsoft/signalr';
//@ts-ignore
import { defineComponent, ref, onMounted } from 'vue';
export default defineComponent({
    name: 'WarehouseDashboard',
    setup() {
        const inventory = ref<string | null>(null);

        // 创建 SignalR 连接
        const connection = new signalR.HubConnectionBuilder()
            .withUrl('http://localhost:5000/warehouseHub')
            .build();

        // 连接 SignalR 并接收数据
        onMounted(() => {
            connection.start()
                .then(() => {
                    console.log('Connected to SignalR Hub');
                })
                .catch((err: Error) => {
                    console.error('SignalR connection error:', err);
                });

            // 接收后台推送的数据
            connection.on('ReceiveInventoryUpdate', (data: string) => {
                inventory.value = data;
            });
        });

        return {
            inventory
        };
    }
});
</script>

<style scoped>
h1 {
    font-size: 24px;
    color: #333;
}
</style> -->
<template>
    <div class="wms - dashboard">
      <!-- 数据总览部分 -->
      <el-row>
        <el-col :span="24">
          <el-card>
            <template #header>
              <h1>数据总览</h1>
            </template>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-card>
                  <template #header>
                    <h2>库存总量</h2>
                  </template>
                  <p>{{ inventoryTotal }}</p>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card>
                  <template #header>
                    <h2>本年销售总额</h2>
                  </template>
                  <p>{{ annualSalesTotal }}</p>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card>
                  <template #header>
                    <h2>本周销售总额</h2>
                  </template>
                  <p>{{ weeklySalesTotal }}</p>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card>
                  <template #header>
                    <h2>本年采购额</h2>
                  </template>
                  <p>{{ annualPurchaseTotal }}</p>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card>
                  <template #header>
                    <h2>库存成本</h2>
                  </template>
                  <p>{{ inventoryCost }}</p>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card>
                  <template #header>
                    <h2>本年销售毛利</h2>
                  </template>
                  <p>{{ annualGrossProfit }}</p>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card>
                  <template #header>
                    <h2>本周销售毛利</h2>
                  </template>
                  <p>{{ weeklyGrossProfit }}</p>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card>
                  <template #header>
                    <h2>本月采购额</h2>
                  </template>
                  <p>{{ monthlyPurchaseTotal }}</p>
                </el-card>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
  
      <!-- 业务员销售排名图表 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card>
            <template #header>
              <h2>本季度 - 业务员销售排名</h2>
            </template>
            <div ref="salesmanChart" style="width: 100%; height: 300px;"></div>
          </el-card>
        </el-col>
        <!-- 仓库销售比较分析图表 -->
        <el-col :span="12">
          <el-card>
            <template #header>
              <h2>本季度 - 仓库销售比较分析</h2>
            </template>
            <div ref="warehouseChart" style="width: 100%; height: 300px;"></div>
          </el-card>
        </el-col>
      </el-row>
  
      <!-- 存货销售比较分析图表 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card>
            <template #header>
              <h2>本季度 - 存货销售比较分析</h2>
            </template>
            <div ref="inventorySalesChart" style="width: 100%; height: 300px;"></div>
          </el-card>
        </el-col>
        <!-- 客户销售比较分析图表 -->
        <el-col :span="12">
          <el-card>
            <template #header>
              <h2>本季度 - 客户销售比较分析</h2>
            </template>
            <div ref="customerSalesChart" style="width: 100%; height: 300px;"></div>
          </el-card>
        </el-col>
      </el-row>
  
      <!-- 销售增长分析图表 -->
      <el-row :gutter="20">
        <el-col :span="24">
          <el-card>
            <template #header>
              <h2>2019年销售增长分析</h2>
            </template>
            <div ref="salesGrowthChart" style="width: 100%; height: 300px;"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, onUnmounted } from 'vue'
  import * as echarts from 'echarts'
  
  // 模拟数据
  const inventoryTotal = ref('76,763,424.80')
  const annualSalesTotal = ref('16,349.00')
  const weeklySalesTotal = ref('349.00')
  const annualPurchaseTotal = ref('2,815,102,175.90')
  const inventoryCost = ref('3,665,745,933.54')
  const annualGrossProfit = ref('2,660.31')
  const weeklyGrossProfit = ref('660.31')
  const monthlyPurchaseTotal = ref('1,400,990,823.71')
  
  // 业务员销售排名图表
  const salesmanChart = ref(null)
  const initSalesmanChart = () => {
    const chart = echarts.init(salesmanChart.value)
    const option = {
      xAxis: {
        type: 'category',
        data: ['李机', '王澡', '张秦海', '小伊伊', '李响', '赵红', '小明', '孙想', '李总', '杨明', '单且', '万鑫']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [500, 700, 900, 1100, 1300, 1500, 1700, 1900, 2100, 2300, 2500, 2700],
        type: 'bar'
      }]
    }
    chart.setOption(option)
  }
  
  // 仓库销售比较分析图表
  const warehouseChart = ref(null)
  const initWarehouseChart = () => {
    const chart = echarts.init(warehouseChart.value)
    const option = {
      xAxis: {
        type: 'category',
        data: ['1号仓库', '2号仓库', '3号仓库', '4号仓库', '5号仓库', '6号仓库', '7号仓库', '8号仓库']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [300, 500, 700, 900, 1100, 1300, 1500, 1700],
        type: 'bar'
      }]
    }
    chart.setOption(option)
  }
  
  // 存货销售比较分析图表
  const inventorySalesChart = ref(null)
  const initInventorySalesChart = () => {
    const chart = echarts.init(inventorySalesChart.value)
    const option = {
      series: [{
        name: '销售占比',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 40, name: '手机' },
          { value: 30, name: '电视' },
          { value: 15, name: '电脑' },
          { value: 5, name: '其他1' },
          { value: 10, name: '其他2' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }]
    }
    chart.setOption(option)
  }
  
  // 客户销售比较分析图表
  const customerSalesChart = ref(null)
  const initCustomerSalesChart = () => {
    const chart = echarts.init(customerSalesChart.value)
    const option = {
      xAxis: {
        type: 'category',
        data: ['华为', '小米', 'OPPO', 'vivo', '苹果', '联想', '三星']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [2000, 2200, 2400, 2600, 2800, 3000, 3200],
        type: 'bar'
      }]
    }
    chart.setOption(option)
  }
  
  // 销售增长分析图表
  const salesGrowthChart = ref(null)
  const initSalesGrowthChart = () => {
    const chart = echarts.init(salesGrowthChart.value)
    const option = {
      xAxis: {
        type: 'category',
        data: ['2019 - 01', '2019 - 02', '2019 - 03', '2019 - 04', '2019 - 05', '2019 - 06', '2019 - 07', '2019 - 08', '2019 - 09', '2019 - 10', '2019 - 11', '2019 - 12']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '销售额',
          type: 'line',
          data: [1000, 1200, 1500, 1300, 1600, 1800, 2000, 2200, 2400, 2600, 2800, 3000],
          itemStyle: {
            color: 'green'
          }
        },
        {
          name: '毛利',
          type: 'line',
          data: [500, 600, 700, 650, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500],
          itemStyle: {
            color: 'blue'
          }
        }
      ]
    }
    chart.setOption(option)
  }
  
  onMounted(() => {
    initSalesmanChart()
    initWarehouseChart()
    initInventorySalesChart()
    initCustomerSalesChart()
    initSalesGrowthChart()
  })
  
  onUnmounted(() => {
    if (salesmanChart.value) {
      salesmanChart.value.dispose()
    }
    if (warehouseChart.value) {
      warehouseChart.value.dispose()
    }
    if (inventorySalesChart.value) {
      inventorySalesChart.value.dispose()
    }
    if (customerSalesChart.value) {
      customerSalesChart.value.dispose()
    }
    if (salesGrowthChart.value) {
      salesGrowthChart.value.dispose()
    }
  })
  </script>
  
  <style scoped>
  .wms-dashboard {
    padding: 20px;
  }
  </style>


